<template>
  <div id="commission">
    <div class="account-head vux-1px-t">
      <div class="balance">
        <p style="font-size: 0.4rem;">
          <countup :end-val="parseFloat(totalmoney) || 0" :duration="1" :decimals="2" class="countupd"></countup>
        </p>
        <p style="font-size: 0.26rem;">佣金余额(元)</p>
      </div>
      <p style="padding-top: 0.5rem; text-align: center; color: #FF5722; font-size: 0.26rem;">
        温馨提示: 佣金最低提取金额为100元起
      </p>
    </div>
    <div style="margin-top: 0.2rem; background: #fff; padding: 0.2rem 0rem;" class="flex account-actions text-center">
      <div class="flex-auto vux-1px-r" @click="modal2 = true">
        <div><i class="icon icon-zhuanzeng"></i></div>
        <p>佣金转赠送余额</p>
        <p class="text-orange" style="margin-top: -.12rem"><small>即时到账</small></p>
      </div>
      <div class="flex-auto">
        <router-link :to="{name: 'withdrawals', query: { type: 'commission'}}" style="display: block;">
          <div><i class="icon icon-tixian1"></i></div>
          <p>佣金提现</p>
        </router-link>
      </div>
    </div>
    <div style="margin-top: 0.2rem; margin-bottom: 0.2rem;">
      <group>
        <cell title="分享注册数"><span style="color: #666;">{{ registerCount || 0 }}</span> 位</cell>
        <cell title="已提现佣金"><span style="color: #666;">{{ yitixian_brokerage || 0 }}</span> 元</cell>
        <cell title="提现中佣金"><span style="color: #666;">{{ zhongtixian_brokerage || 0 }}</span> 元</cell>
        <cell title="总手续费"><span style="color: #666;">{{ fee || 0 }}</span> 元</cell>
        <cell title="总佣金收入" is-link link="commissionList"><span style="color: #666;">{{ total_brokerage || 0 }}</span> 元</cell>
      </group>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="modal2" class="modal">
        <div class="title">请填写金额</div>
        <div class="content">
          <div class="vux-1px">
            <div class="vux-x-input weui-cell weui-vcode">
              <div class="weui-cell__bd weui-cell__primary">
                <input class="weui-input" @input="keyUp" placeholder="请输入金额" v-model="money" />
              </div>
              <div class="weui-cell__ft"><span style="margin-left: 0.1rem;">元</span></div>
            </div>
          </div>
        </div>
        <div class="btn-group vux-1px-t">
          <div class="vux-1px-r" @click="modal2 = false">取消</div>
          <div class="text-orange" @click="onConfirm">即时到账，确认</div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Cell, TransferDom, Countup } from 'vux'

export default{
  name: 'commission',
  directives: {
    TransferDom
  },
  components: {
    PubHeader,
    Cell,
    Countup
  },
  created() {
    this.getData()
  },
  data() {
    return {
      money: '',
      t_money: undefined,
      modal2: false,
      totalmoney: 0,
      registerCount: 0,
      yitixian_brokerage: 0,
      zhongtixian_brokerage: 0,
      fee: 0,
      total_brokerage: 0,
    }
  },
  methods: {
    keyUp() {
      if (!this.money.match(/^\d*?\.?\d{0,2}?$/)){
        if(this.t_money === undefined){
          this.t_money = '';
        }
        this.money = this.t_money;
      } else {
        this.t_money = this.money;
      }
    },
    getData() {
      this.$http.post($config.host + '/api/Account/mybrokerageinfo', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const {code, data, msg} = res.data
        if(code == 1 && data) {
          this.totalmoney = data.yue_yong
          this.registerCount = data.register_count
          this.yitixian_brokerage = data.yitixian_brokerage
          this.zhongtixian_brokerage = data.zhongtixian_brokerage
          this.fee = data.fee
          this.total_brokerage = data.total_brokerage
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    onConfirm() {
      if(!this.money){
        return false
      }
      if(this.money > this.totalmoney){
        this.$vux.toast.text('佣金余额不足', 'middle')
        return false
      }
      this.$http.post($config.host + '/api/Account/yongJingToMoney', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        money: this.money
      })).then(res => {
        const {code, data, msg} = res.data
        if(code == 1) {
          this.totalmoney -= this.money
          this.total_brokerage -= this.money
          this.$vux.toast.text('转入成功', 'middle')
          this.money = ''
          this.modal2 = false
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    if(to.name == 'withdrawals' && this.totalmoney < 100) {
      this.$vux.alert.show({
        title: '提示',
        content: '佣金最低提取金额为100元起',
        buttonText: '我知道了'
      })
      return
    }
    next()
  }
}
</script>
<style scoped>
  .account-head{
    height: 4.35rem;
    padding-top: 1rem;
    background: #fff url("../../static/img/zhbg.png") bottom left no-repeat;
    background-size: 7.5rem 3.1rem;
  }
  .account-head .balance{
    position: relative;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    margin: 0 auto;
    background: #ff5722;
    color: #fff;
    text-align: center;
    line-height: 0.55rem;
    padding-top: 0.65rem;
  }
  .account-head .balance:after{
    content: '';
    position: absolute;
    z-index:1;
    top: 0.1rem;
    left: 0.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid #ffc4b8;
  }
  .account-head .balance:before{
    content: '';
    position: absolute;
    z-index:1;
    top: -0.2rem;
    left: -0.2rem;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 1px solid #ffc4b8;
  }
  .countupd{
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  }
  .account-actions>div{
    min-height: 1.2rem;
  }
  .account-actions .icon{
    font-size: 0.8rem;
    color: #ff5607;
    display: block;
    margin-top: -0.25rem;
  }
  .account-actions p{
    margin-top: -0.25rem;
  }
</style>
